<template>
  <!-- 项目实施 - 11风险监控 - tab2完结项目 -->
  <div class="risk-monitoring-end">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form class="search" :inline="true" :model="formData" label-position="right" label-width="90px">
          <el-row :gutter="12">
            <el-col :span="16" v-if="showSearch == false">
              <advancedFilter></advancedFilter>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="项目名称">
                <el-input v-model="formData.ipt1" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="风险类型">
                <el-select v-model="formData.sel" multiple clearable placeholder="请选择..." style="width: 100%;">
                  <el-option label="质量风险" value="0"></el-option>
                  <el-option label="成本风险" value="1"></el-option>
                  <el-option label="人事风险" value="2"></el-option>
                  <el-option label="设计风险" value="3"></el-option>
                  <el-option label="环境风险" value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="风险名称">
                <el-input v-model="formData.ipt2" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="登记日期">
                <el-date-picker
                  v-model="formData.date"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width:100%"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="showSearch ? 24 : 8" style="text-align: right;">
              <el-button type="primary">筛选</el-button>
              <el-button @click="resetForm">重置</el-button>
              <el-button type="text" @click="changeSearch"> {{showSearch===true ? '高级筛选' : '普通筛选'}} </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24" style="margin-top: 16px;">
        <el-row :gutter="12" style="display: inline-flex;width: 100%;">
          <el-col :span="4" :md="5" class="border-r">
            <el-input v-model="treeSearch" class="tree-search" placeholder="搜索关键字" suffix-icon="el-icon-search"></el-input>
            <el-tree class="cust-tree" node-key="id" :data="treeData" ref="tree" :props="defaultProps" @node-click="handleNodeClick" default-expand-all></el-tree>
          </el-col>
          <el-col :span="20" :md="19">
            <cust-act-table
              ref="custActTable"
              tableType=""
              :list="tableData"
              :colConfigs="customColumns"
              @changePage="changePage"
              @getSelectedRow="modalState = true"
              :pageNum="page.pageNum"
              :pageSize="page.pageSize"
              :total="page.total"
              :showIdx="false"
              :showAct="false"
              rKey="index"
            ></cust-act-table>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog title="查看" class="btn-modal" :visible.sync="modalState" @close="modalState = false" width="800px" :close-on-click-modal="false">
      <modalBtns modalType="table" @close="modalState = false"></modalBtns>
      <formName text="风险登记册"></formName>
      <div class="form-content">
        <formPart listTitle="基本信息" ref="info1" modalTitle="查看" :formList="formInfo.info1"></formPart>
        <formPart listTitle="风险分析" ref="info2" modalTitle="查看" :formList="formInfo.info2"></formPart>
        <formPart listTitle="风险更新" ref="info3" modalTitle="查看" :formList="formInfo.info3"></formPart>
      </div>
    </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { tableData11_2, customColumns11_2 } from '../../js/staticData';
import modalBtns from '../../components/modalBtns';
import formName from '../../components/formName';
import formPart from '../../components/formPart';
import advancedFilter from '../../components/advancedFilter';
import custActTable from "../../components/custActTable.vue";
export default {
  name: "riskMonitoringEnd",
  components: {custActTable, advancedFilter, modalBtns, formName, formPart},
  data() {
    return {
      formData: {
        ipt1: '',
        ipt2: '',
        sel: [],
        date: ''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      showSearch: true,
      treeSearch: '',
      treeData: [
        {
          label: '风险类型',
          children: [
            { label: '质量风险', id: 0},
            { label: '成本风险', id: 1},
            { label: '人事风险', id: 2},
            { label: '设计风险', id: 3},
            { label: '环境风险', id: 4}
          ]
        }
      ],
      contentIdx: 0,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      contentIdx: 0,
      tableData: tableData11_2[0],
      customColumns: customColumns11_2,
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      modalState: false,
      formInfo: {
        info1: [
          { l: '风险名称', v: '客户方项目实施人员离职风险', span: 12 },
          { l: '风险类型', v: '人事风险', span: 6 },
          { l: '风险状态', v: '未发生', span: 6 },
          { l: '负责人', v: '苑珙', span: 6 },
          { l: '预计发生', v: '2024-06-31', span: 6 },
          { l: '项目名称', v: '蓝旗机器人系统升级', span: 12 },
          { l: '风险描述', v: '客户方项目实施人员有离职意向。', span: 24 },
        ],
        info2: [
          { l: '发生概率', v: '高', span: 6 },
          { l: '影响程度', v: '轻微', span: 6 },
          { l: '风险等级', v: '二级', span: 6 },
          { l: '应对策略', v: '上报', span: 6 },
          { l: '应对措施', v: '客户方项目实施人员离职，将面对新人何时到位，到位后熟悉项目和培训技能等问题，将导致项目进度落后。针对上述情况，项目组应立即与客户方领导沟通形成应对方案。', span: 24 }
        ],
        info3: [
          { l: '负责人', v: '苑珙', span: 6 },
          { l: '更新日期', v: '', span: 6 },
          { l: '更新说明', v: '', span: 24 }
        ]
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.tableData = tableData11_2[0];
      setTimeout(() => {
        document.querySelector('.border-r').style.height = `${document.querySelector('.cust-act-table').offsetHeight}px`;
      }, 1500)
      this.customColumns = customColumns11_2;
    })
  },
  methods: {
    /**
     * @author Wrl
     * 重置查询条件
     */
    resetForm() {
      this.formData = {};
    },
    /**
     * @author Wrl
     * 切换查询条件
     */
    changeSearch() {
      this.showSearch = !this.showSearch
    },
    /**
     * @author Wrl
     * 点击树形控件
     */
    handleNodeClick(data) {
      this.contentIdx = data.id;
      this.customColumns = customColumns11_2;
      this.tableData = tableData11_2[this.contentIdx];
    },
		/**
		 * @author Wrl
		 * 获取分页信息
		 */
		changePage(page) {
			this.page.pageNum = page.pageNum; // 当前页
			this.page.pageSize = page.pageSize; // 每页条数
			this.page.total = page.total; // 总数
		},
  }
};
</script>

<style lang="scss" scoped>
  .risk-monitoring-end {
    ::v-deep {
      .search {
        .el-form-item {
          width: 100%;
        }
        .el-form-item__content {
          width: calc(100% - 90px);
        }
      }
      .btn-modal {
        .el-dialog__header {
          padding: 20px 20px 0;
        }
        .el-dialog__body {
          padding: 0 20px;
        }
      }
      .cust-modal .cust-modal-bgi {
        margin-top: 10px;
      }
    }
    .tree-search {
      width: 200px;
      ::v-deep .el-input__inner {
        border-radius: 20px;
      }
    }
    .cust-tree {
      margin-top: 16px;
    }
    .border-r {
      min-width: 220px;
      border-right: 1px solid #cccccc;
    }
  }
</style>